<template>
	<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
		<span>
			<el-select v-model="searchObj.projectCode" filterable clearable class="zs-select-md zs-space-right-sm" placeholder="项目名称">
				<el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
			</el-select>
			<el-date-picker class="zs-select-md zs-space-right-sm" v-model="searchObj.queryTime" value-format="YYYY-MM" type="month" placeholder="月份" @change="changeMonth" />
			<el-select v-model="searchObj.caliber" class="zs-select-md zs-space-right-sm" placeholder="口径" :teleported="false">
				<el-option v-for="item in caliberList" :key="item.id" :label="item.label" :value="item.id" />
			</el-select>
			<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
				<template #reference>
					<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': searchObj.standard.length || searchObj.city }">
						<el-icon>
							<MoreFilled />
						</el-icon>
					</el-button>
				</template>
				<template #default>
					<el-select v-model="searchObj.standard" multiple collapse-tags collapse-tags-tooltip clearable filterable class="zs-select-md zs-space-right-sm" placeholder="标准" :teleported="false">
						<el-option v-for="item in standList" :key="item.standardCode" :label="item.standardName" :value="item.standardCode" />
					</el-select>
					<el-cascader class="zs-select-md zs-space-right-sm" v-model="city" :options="cityList" placeholder="城市" :props="cascaderProps" clearable filterable @change="changeCity" :teleported="false" />
				</template>
			</el-popover>
			<el-button class="zs-btn-plain" @click="search()"> 查询 </el-button>
		</span>
		<span class="zs-layout-flex-row">
			<div class="db-btn zs-space-right-sm" :class="{ 'db-btn-primary': item.manageCode == searchObj.companyAreaManage }" @click="changeTab(item)" v-for="(item, index) in manageList" :key="index">
				{{ item.manageName }}
			</div>
		</span>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import projectListApi from '@/api/Property/projectList';
	import dbPublicApi from '@/api/dbPublic';

	const props = defineProps({
		menuKey: {
			type: String,
			required: true,
		},
		pageKey: {
			type: String,
			required: true,
		},
		// type 1 物业汇总 2 物业项目
		type: {
			type: String,
			required: true,
		},
	});

	let projectList = ref([]);
	const manageList = ref([{ manageCode: '整体', manageName: '整体' }]);
	const standList = ref([]);

	const searchObj = ref({
		companyAreaManage: manageList.value[0].manageCode,
		projectCode: '',
		standard: [],
		city: '',
		queryTime: '',
		caliber: '1',
		menuKey: props.menuKey,
		pageKey: props.pageKey,
	});

	// 区域
	const getManageList = () => {
		projectListApi.queryProjectManageListApi({ menuKey: searchObj.value.menuKey, pageKey: searchObj.value.pageKey }).then(res => {
			if (res.data.code == 200) {
				manageList.value = manageList.value.concat(res.data.data ? res.data.data : []);
			}
		});
	};

	// 项目
	const getProjectList = () => {
		projectListApi.queryProjectListApi({ companyAreaManage: searchObj.value.companyAreaManage, menuKey: searchObj.value.menuKey, pageKey: searchObj.value.pageKey }).then(res => {
			if (res.data.code == 200) {
				projectList.value = res.data.data;
			}
		});
	};

	// 标准
	const getStandList = () => {
		if (props.type == 1) {
			projectListApi.queryAppProjectStandardListApi({ companyAreaManage: searchObj.value.companyAreaManage }).then(res => {
				if (res.data.code == 200) {
					standList.value = res.data.data;
				}
			});
		}

		if (props.type == 2) {
			projectListApi.queryProjectStandardListApi({ companyAreaManage: searchObj.value.companyAreaManage, menuKey: searchObj.value.menuKey, pageKey: searchObj.value.pageKey }).then(res => {
				if (res.data.code == 200) {
					standList.value = res.data.data;
				}
			});
		}
	};

	// 城市
	const cascaderProps = { multiple: false, label: 'label', value: 'value', children: 'children' };
	let cityList = ref([]);
	let city = ref([]);
	const addrBasicsTree = JSON.parse(localStorage.getItem('addrTree') ?? '[]').list;

	addrBasicsTree.map(item => {
		const childList = [];
		item.childList.map(child => {
			childList.push({ label: child.name, value: child.code });
		});
		cityList.value.push({
			label: item.name,
			value: item.code,
			children: childList,
		});
	});

	const changeTab = value => {
		searchObj.value.companyAreaManage = value.manageCode;
		getProjectList();
		getStandList();
		searchObj.value.projectCode = '';
		searchObj.value.standard = [];
		search();
	};

	const emit = defineEmits(['onSearch']);

	const changeCity = () => {
		searchObj.value.city = city.value ? city.value[1] : '';
	};

	const search = () => {
		emit('onSearch', { data: searchObj.value });
	};

	// 口径
	const caliberList = ref([]);
	const changeMonth = () => {
		const manage = { id: '1', label: '管理口径' };
		const eas = { id: '2', label: 'EAS口径' };
		const adjust = { id: '3', label: '调整台账' };
		const year = searchObj.value.queryTime.split('-')[0];
		const month = searchObj.value.queryTime.split('-')[1];
		if (year == 2024) {
			if (month >= 1 && month <= 4) {
				caliberList.value = [manage];
				searchObj.value.caliber = '1'
			} else {
				caliberList.value = [manage, eas, adjust];
			}
		} else if (year < 2024) {
			caliberList.value = [manage];
			searchObj.value.caliber = '1'
		} else {
			caliberList.value = [manage, eas, adjust];
		}
	};

	//更新时间 - 通用
	const queryDataUpdateTime = async () => {
		let res = await dbPublicApi.queryUpdateTimeApi();
		if (res.data.code != 200) return;
		searchObj.value.queryTime = res.data.data.monthTime || '';
		changeMonth();
		search();
	};

	const init = () => {
		queryDataUpdateTime();
		getManageList();
		getProjectList();
		getStandList();
	};

	init();
</script>
